<script>
export default {
  name: 'Overview',
  props: {
    queryParams: {
      required: false,
      default: null
    },
    projectList: {
      required: false,
      default: []
    }
  },
  watch: {
    queryParams: {
      async handler(val) {
        if (val.sceneProjectId != null) {
          const param = {
            statisticsMode: val.statisticsMode,
            solidifyDateStart: val.startTime,
            solidifyDateEnd: val.endTime,
            sceneProjectId: val.sceneProjectId
          }
          if (val.roomInfo != null && val.roomInfo.length > 0) {
            param.sceneEdificeId = val.roomInfo[0]
            param.sceneFloorId = val.roomInfo.length > 1 ? val.roomInfo[1] : null
            param.sceneRoomId = val.roomInfo.length > 2 ? val.roomInfo[2] : null
          }
          const res = await this.$api.carbonEmissionReport.overviewData(param)
          this.startTime = res.data.startDate
          this.endTime = res.data.endDate
          this.energyConsumptionTotal = res.data.energyConsumptionTotal
          this.carbonEmissionsTotal = res.data.carbonEmissionsTotal
          this.carbonReductionTotal = res.data.carbonReductionTotal
          this.carbonSinkTotal = res.data.carbonSinkTotal
        }
      },
      deep: true,
      immediate: true
    }
  },
  computed: {
    getProjectNames() {
      return this.projectList.filter(project => this.queryParams.sceneProjectId == null || project.value === this.queryParams.sceneProjectId)
        .map(project => project.label).join('，')
    },
  },
  data() {
    return {
      startTime: null,
      endTime: null,
      energyConsumptionTotal: 0, // 能源使用总量
      carbonEmissionsTotal: 0, // 碳排放总量
      carbonReductionTotal: 0, // 碳减排总量
      carbonSinkTotal: 0 // 碳汇总量
    }
  }
}
</script>

<template>
  <div>
    <h2>03 总览</h2>
    <div class="overview-data-box">
      <div class="data-box">
        <div class="data-card">
          <div>能源使用总量（kgce）</div>
          <div class="value">{{ energyConsumptionTotal }}</div>
        </div>
        <div class="data-card">
          <div>碳排放总量（kgC02）</div>
          <div class="value">{{ carbonEmissionsTotal }}</div>
        </div>
      </div>
      <div class="data-box" v-if="queryParams.roomInfo == null || queryParams.roomInfo.length === 0">
        <div class="data-card">
          <div>碳减排总量（kgCO2）</div>
          <div class="value">{{ carbonReductionTotal }}</div>
        </div>
        <div class="data-card">
          <div>碳汇总量（kgC02）</div>
          <div class="value">{{ carbonSinkTotal }}</div>
        </div>
      </div>
    </div>
    <p>
      {{ getProjectNames }}在{{ startTime }} - {{ endTime }}中，能源使用总量为{{ energyConsumptionTotal }}
      kgce，碳排放总量为{{ carbonEmissionsTotal }} kgCO2
      <span v-if="queryParams.roomInfo == null || queryParams.roomInfo.length === 0">、碳减排总量{{ carbonReductionTotal
        }} kgCO2、碳汇总量{{ carbonSinkTotal }} kgCO2</span>。
    </p>
  </div>
</template>

<style scoped lang="scss">

.overview-data-box {
  background-color: rgba(2, 149, 144, 0.1);
  width: 50%;
  margin: 0 25%;

  .data-box {
    display: flex;
    text-align: center;
    padding: 20px;
    line-height: 32px;
    margin-bottom: 10px;
    justify-content: space-around;

    .data-card {
      padding: 4px 8px;
      background-color: rgba(2, 149, 144, 0.16);
    }

    .value {
      font-size: 22px;
      font-weight: 600;
    }
  }
}

p {
  margin: 0 5%;
  text-indent: 2em;
}
</style>
